<template>
    <el-form-item label="智能放量" prop="title">
        <el-radio-group v-model="createform.audience.auto_extend_enabled" size="small" @change="sessionSave">
            <el-radio-button :label="0">不开启</el-radio-button>
            <el-radio-button :label="1">开启</el-radio-button>
        </el-radio-group>
        <el-form-item label="" :prop="`audience.auto_extend_text`" v-if="createform.audience.auto_extend_enabled==1" key="auto_extend_text">
            <div class="cascader_box cascader_box2">
                <div class="flexbox flexbetween">
                    <div class="cascader_left" style="width:450px">
                        <div class="cas_header flexbox flexcenter">可放开定向</div>
                        <div class="cas_center over_box flexbox">
                            <el-checkbox-group v-model="createform.audience.auto_extend_targets" style="width:100%" class="talent_check" @change="checkExtend">
                                <el-checkbox :label="item.id" v-for="(item,index) in extendList" :key="index">
                                    <div class="intel_text">{{item.name}}</div>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="cascader_right flexbox flexcolumn">
                        <div class="cas_header flexbox flexcenter flexbetween">
                            <span>已选</span>
                            <el-link type="primary" :underline="false" @click="clearExtend">清空</el-link>
                        </div>
                        <div class="has_ckecked_box over_box">
                            <div class="has_checked_item flexbox flexcenter flexbetween" v-for="(item,index) in createform.audience.auto_extend_text" :key="index">
                                <span class="has_checked_text">{{item.name}}</span>
                                <el-link class="has_checked_icon" icon='el-icon-close' :underline="false" @click="deletExtend(item,index)"></el-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-form-item>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform"],
    name: "",
    data() {
        return {
            extendList: [
                {
                    id: "REGION",
                    name: "地域",
                },
                {
                    id: "GENDER",
                    name: "性别",
                },
                {
                    id: "AGE",
                    name: "年龄",
                },
                {
                    id: "INTEREST_ACTION",
                    name: "行为兴趣",
                },
                {
                    id: "CUSTOM_AUDIENCE",
                    name: "更多人群-自定义人群",
                },
            ],
        };
    },
    created() {},
    methods: {
        // 选择智能放量
        checkExtend(v) {
            let list = v;
            let list2 = this.extendList;
            let newArr = list2.filter(function (n) {
                return list.indexOf(n.id) != -1;
            });
            this.createform.audience.auto_extend_text = newArr;
            this.sessionSave();
        },

        // 删除智能放量
        deletExtend(item, index) {
            let b = this.createform.audience.auto_extend_targets.filter(
                (it) => {
                    if (it != item.id) {
                        return it;
                    }
                }
            );
            this.createform.audience.auto_extend_targets = b;
            this.createform.audience.auto_extend_text.splice(index, 1);
            this.sessionSave();
        },

        // 清空已选智能放量
        clearExtend() {
            this.createform.audience.auto_extend_targets = [];
            this.createform.audience.auto_extend_text = [];
            this.sessionSave();
        },
        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

